"use client";
import { Card, List, Tag, Typography, Space } from "antd";
import "./index.css";
import Link from "next/link";
import React from "react";

interface Props {
    questionList: API.QuestionVO[];
    cardTitle?: string;
    questionBankId?: number;
}

/**
 * 题目列表组件
 * @param props
 * @constructor
 */
const QuestionList = (props: Props) => {
    const { questionList = [], cardTitle, questionBankId } = props;

    const tagList = (tags: string[] = []) => {
        if (!tags.length) return null;

        return (
            <Space wrap className="tag-container">
                {tags.map((tag) => (
                    <Tag key={tag} className="custom-tag">
                        {tag}
                    </Tag>
                ))}
            </Space>
        );
    };

    return (
        <Card className="question-list-card" title={cardTitle}>
            <List
                dataSource={questionList}
                renderItem={(item: API.QuestionVO, index) => (
                    <List.Item
                        className={`question-list-item ${index % 2 === 0 ? 'even' : 'odd'}`}
                        extra={tagList(item.tagList)}
                    >
                        <List.Item.Meta
                            title={
                                <Link
                                    href={
                                        questionBankId
                                            ? `/bank/${questionBankId}/question/${item.id}`
                                            : `/question/${item.id}`
                                    }
                                    className="question-link"
                                >
                                    {item.title}
                                </Link>
                            }
                            description={item.content ? (
                                <Typography.Paragraph
                                    ellipsis={{ rows: 1 }}
                                    className="question-description"
                                >
                                    {item.content}
                                </Typography.Paragraph>
                            ) : null}
                        />
                    </List.Item>
                )}
            />
        </Card>
    );
};

export default QuestionList;